<head>
    <script src="../build/index.js"></script>
    <script src="../build/plugin.webgl.js"></script>
    <script src="../build/plugin.webgl.mmd.js"></script>
    <script src='../resource/mmd/lib/ammo.js'></script>
</head>

<style>
    canvas {
        border: 1px solid grey;
        background-color: #4caf50;
        /*opacity: 0.05;*/
    }
</style>

<body>
    <canvas id="app" width="600" height="600"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            webgl: {
              light: true,
            },
        });
        $app.start();

        var $role = $app.add({
            style: {
                left: 200, top: 500,
                zIndex: Math.random(),
            },
        });

        window.Easycanvas.loaderPMD('../resource/mmd/model/default/miku_v2.pmd', function (data, pmd) {
            window.vertices = data.vertices;
            window.normals = data.normals;
            window.textures = data.textures;
            window.indices = data.indices;

            window.pmd = pmd;
            add();

            window.Easycanvas.loaderVMD('../resource/mmd/vmd/wavefile_v2.vmd', function (vmd) {
                vmd.start(pmd, $role.children[0].webgl.vertices);
            });
        });
        // window.Easycanvas.loaderPMD('/demos/resource/mmd/model/mokou/mokou_A.pmd');

        function add () {
            var lastCount = 0;
            console.log(Date.now());

            pmd.materials.forEach((mt, i) => {
                for (var performanceTest = 0; performanceTest < 1; performanceTest++) {
                    $role.add({
                        style: {
                            left: performanceTest * 30,
                        },
                        webgl: window.Easycanvas.webglShapes.custom({
                            vertices: vertices,
                            normals: normals,
                            indices: indices.slice(lastCount, lastCount + mt.vertexCount),
                            textures: textures,
                            img: mt.fileName ? ('../resource/mmd/model/mokou/' + mt.fileName) : undefined,
                            // ry: Easycanvas.Transition.linear(0, 360, 5000).loop(),
                            rz: 180, ry: 0,
                            scaleX: 20, scaleY: 20, scaleZ: 20,
                            // colors: !textures.length ? colors : undefined,
                            colors: mt.fileName ? undefined : (
                              mt.color.map((num) => {return num * 255}).slice(0, 3)
                            ), // mirrorColor
                        })
                    });
                }
                lastCount += mt.vertexCount;
            });

            console.log(Date.now());

            window.$role = $role;
        }
    </script>
</body>

